<template>
  <div class="notice">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统公告</span>
        <el-button
          style="float: right; padding: 3px 0; position: relative"
          type="text"
          @click="moreNotices"
          >更多信息</el-button
        >
      </div>
      <el-tooltip
        placement="top"
        v-for="(item, index) in noticeSystem"
        :key="item.id"
        class="text item"
        effect="light"
      >
        <div slot="content">{{ item.ntitle }} —— {{ item.updateTime }}</div>
        <div @click="view(item.id)">
          <a>{{ ++index }}、{{ item.ntitle }}</a>
        </div>
      </el-tooltip>
    </el-card>
    <el-card class="box-card" style="margin-left: 30px">
      <div slot="header" class="clearfix">
        <span>招标公告</span>
        <el-button
          style="float: right; padding: 3px 0; position: relative"
          type="text"
          @click="moreNotices"
          >更多信息</el-button
        >
      </div>

      <el-tooltip
        placement="top"
        v-for="(item, index) in noticeTender"
        :key="item.id"
        class="text item"
        effect="light"
      >
        <div slot="content">{{ item.ntitle }} -- {{ item.updateTime }}</div>
        <div @click="view(item.id)">
          <a>{{ ++index }}、{{ item.ntitle }}</a>
        </div>
      </el-tooltip>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "CardNotice",

  props: {
    noticeSystem: Array,
    noticeTender: Array,
  },

  methods: {
    view(id) {
      this.$router.push({ path: `/viewNotice/${id}` });
    },
    moreNotices() {
      this.$router.push({ path: `/noticeInfo/${1}` });
    }
  },
};
</script>

<style scoped>
.notice {
  align-content: center;
}
.text {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}

.item {
  margin-bottom: 22px;
}
a {
  color: #0000ff;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 20px;
  width: 300px;
  height: 300px;
  display: inline-block;
}
</style>